<template>
	<view class="submitOrder">
		<!-- <Header @back="back" left-icon="back" left-text="" right-text="" title="提交预定"></Header> -->
		<view class="content">
			<view class="title">
				<text>{{name}}</text>
				<br>
				<block v-for="(item,index) in room_facility" :key="index">
					<text>{{item}}</text>
					<text v-if="index < room_facility.length - 1">丨</text>
				</block>
			</view>
			<view class="calendar">
				<text style="font-size: 40upx;" class="iconfont icon-calendar-check"></text>
				<text style="margin-left: 10upx;">{{timeStart}} - {{timeEnd}} 共{{difValue}}晚</text>
			</view>
			<view class="tips">
				<text style="font-size: 40upx;" class="iconfont icon-close-square"></text>
				<text style="margin-left: 10upx;">不可取消</text><text style="margin-left: 12upx;">未入住将不退款</text>
			</view>
		</view>
		<view class="main">
			<view class="main-title">
				<text>入住信息</text>
			</view>
			<view class="rooms">
				<text>房间数</text><text style="margin-left: 60upx;">1间</text> 
			</view>
			<view class="contacts">
				<text>入住人</text>
				<input class="uni-input mainInput InputName" @focus="inputFocus(1)" @blur="inputBlur(1)" v-model="userName"
				 placeholder="填写实际入住人姓名" />
			</view>
			<view class="phoneNum">
				<text style="margin-right: 10upx;">手机号</text>
				<input class="uni-input mainInput InputPhone" maxlength="11" type="number" @focus="inputFocus(2)" @blur="inputBlur(2)" v-model="userPhone"
				 placeholder="用于接收购票信息" />
			</view>
			<view class="desc">
				<view class="title">
					<text>退改说明</text>
				</view>
				<view class="contents">
					<text>您所订购的酒店不可取消订单</text>
				</view>
			</view>
		</view>
		<view class="foot-bar">
				
					<view class="bottom-left">
						<text class="moneyTxt">应付：</text>
						<text class="money">￥{{parentDate.totalRate}}</text>
					</view>
				
					<view  class="bottom-right  submit" @click="submitBtnNew">立即订购</view>
							
		</view>
		<!-- <view class="bottom">
			<view class="bottom-left">
				<text class="moneyTxt">总计金额：</text>
				<text class="money">￥{{parentDate.price * difValue}}</text>
			</view>
			<view class="bottom-right" @click="submitBtn">
				<text>提交</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	export default {
		onLoad: function(option) {
		
			this.parentDate = JSON.parse(decodeURIComponent(option.item));
				console.log("传过来的参数酒店----->",this.parentDate);
			let dateStart = new Date(this.parentDate.indate);
			let dateEnd = new Date(this.parentDate.outdate);

			this.difValue = (dateEnd - dateStart) / (1000 * 60 * 60 * 24);

			this.timeStart = this.getNowFormatDate(dateStart)
			this.timeEnd = this.getNowFormatDate(dateEnd)
		},
		data() {
			return {
				name: '',
				parentDate: '',
				timeStart: '',
				timeEnd: '',
				difValue: '',
				userPhone: '',
				userName: '',
				position: 'fixed',
				lastFocusInputIndex: '',
				isOriginHei: true,
				checkClick: true,
				room_facility:[
					"无早",
					"双床",
					"有窗"
				],
				hotelInfo:{}
			}
		},
		components: {
			Header
		},
		onShow() {
			//#ifdef H5
			document.title = '提交预定'
			//#endif
			this.getDataName()
		},
		mounted() {

		},
		watch: {

		},
		methods: {
			inputFocus(index) {
				this.lastFocusInputIndex = index
				// let PhoneHeight = document.querySelector('.InputPhone').offsetTop;
				// this.position = 'static';
				// alert(document.querySelector('.InputPhone').offsetTop)
				// 				uni.pageScrollTo({
				// 					scrollTop: PhoneHeight,
				// 					duration: 10
				// 				});
			},
			inputBlur(index) {
				let self = this
				self.lastFocusInputIndex = index
				// this.position = 'static';
				setTimeout(() => {
					self.checkInputBlur(index)
				}, 100)
			},
			checkInputBlur(lastIndex) {
				console.log(this.lastFocusInputIndex === lastIndex)
				if (this.lastFocusInputIndex === lastIndex) {
					// this.position = 'fixed';
					// this.isOriginHei = true;
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 10
					});
					this.lastFocusInputIndex = -1
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			//日期格式化
			getNowFormatDate(date) {
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year +'年' + month + '月' + strDate + '日';
				return currentdate;
			},
			//公共弹窗服务
			showError(msg){
				uni.showToast({
						title:msg,
						icon: 'none',
						duration: 2000
					});
			},
			//获取数据名
			getDataName() {
				this.$postApi(this.$path.GET_HOTEL_BYID, {
					id: this.parentDate.hotelId
				}).then(data => {
					console.log(data, '获取数据名')
					this.name = data.data.data.title + "(" + this.parentDate.roomName + ")"
					this.hotelInfo = data.data.data
					
					console.log("this.hotelInfo------------------>",this.hotelInfo)
				})
			},
			//判断输入内容是否为空 
			IsNull(name) {
				var reg = /^\s*$/g;
				if (reg.test(name) || name == null || name == "") {
					this.pub.showError('请输入姓名')
					return false
				} else {
					return true
				}
			},
			//手机号验证
			checkPhone(phone) {
				if (!(/^1[34578]\d{9}$/.test(phone))) {
					this.pub.showError("手机号码有误，请重填")
					return false
				} else {
					return true
				}
			},
			submitBtnNew(){
				let memberid = this.pub.getMemberId('memberid')
				let params = {
						arrivalDate: this.parentDate.indate,
						bustype: this.hotelInfo.bustype,
						channelType: '1',
						code: this.hotelInfo.code,
						departureDate:this.parentDate.outdate ,
						memberId: memberid,
						mobile: this.userPhone,
						name: this.userName,
						numberOfRooms: 1,
						payAmount: this.parentDate.totalRate,
						ratePlanId: this.parentDate.ratePlanId,
						roomName: this.parentDate.roomName,
						roomTypeId: this.parentDate.roomTypeId,
						title: this.hotelInfo.title
				}
				
				if (!this.IsNull(params.name)) {
					return;
				}
				if(!this.checkPhone(params.mobile)){
					return;
				}
				uni.showLoading({
					mask: true,
					title: "正在提交订单..."
				})
				console.log("酒店提交订单参数-------------->",params);
				this.$postApi(this.$path.ORDER_HOTEL_SUBMIT,params).then(res => {
					console.log("酒店订单提交返回-------------->",res.data);
					uni.hideLoading()
					if(res.data.success){
						params.order_id = res.data.data.id
						params.totalPrice = params.payAmount
						params.orderId = res.data.data.id
						uni.navigateTo({
							url: '/pages/scenicOrder/counter?data=' + JSON.stringify(params) + '&bustype=2',
							animationType: 'pop-in',
							animationDuration: 200
						});
					}else{
						uni.showModal({
							content: res.data.error.errorMessage || res.data.error
						})
					}
				})
			},
			//提交
			submitBtn() {
				if (this.checkClick) {
					let account = this.pub.getAccount();
					let openid = this.pub.getOpenid();
					let obj = {
						unionid: account,
						hotelId: this.parentDate.hotelId, //酒店iD
						name: this.name, //酒店名称
						telName: this.userName,
						mobileTel: this.userPhone,
						orderRoomNum: 1, //房间数
						merchantNo: this.parentDate.merchantNo,
						roomId: this.parentDate.id,
						orderPrice: this.parentDate.price * this.difValue, //订单总额
						checkDay: this.difValue, //居住天数
						checkOutTime: this.parentDate.outdate,
						checkInTime: this.parentDate.indate,
						type:"1"
					}
					console.log(obj)
					this.checkClick = false;
					if (this.IsNull(obj.telName)) {
						if (this.checkPhone(obj.mobileTel)) {
							uni.showLoading({
								mask: true,
								title: "正在提交订单..."
							})
							this.$postApi(this.$path.SUBMIT_HOTEL_ORDER, obj).then(data => {
								console.log(data, '提交')
								uni.hideLoading()
								if (data.data.success) {
									obj.orderId = data.data.retData.orderId
									obj.parentOrderId = data.data.retData.parentOrderId
									uni.navigateTo({
										url: '/pages/scenicOrder/counter?data=' + JSON.stringify(obj),
										animationType: 'pop-in',
										animationDuration: 200
									});

								} else {
									uni.showModal({
										content: data.data.rMsg
									})
								}
							})
						}
					}
				}

				var that = this;
				setTimeout(function() {
					that.checkClick = true;
				}, 3000);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submitOrder {	
		background: #f5f5f5;
		min-height: 100%;
		font-size: 28upx;
		padding: 20upx;
		.content {
			background: #fff;
			border-radius: 10upx;
			padding: 20upx;
			line-height:48upx;
			padding-bottom: 30upx;
			.title{
				border-bottom: 1upx solid #eee;
				padding: 20upx;
				font-size: 30upx;
				font-weight: 400;
			}
			.calendar,.tips{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 30upx;
				// line-height: 34upx;
				padding-top: 2upx;
				padding: 20upx;
				font-weight: 400;
			}
			

		}

		.main {
			margin-top: 20px;
			padding: 23upx;
			border-radius: 12upx;
			min-height: 500upx;
			background: #fff;
			.main-title {
				font-size: 36upx;
				// margin-bottom: 82upx;
				line-height: 56upx;
				padding-bottom: 24upx;
				border-bottom: 1upx solid #eee;
				color: #333333;
				font-weight: bold;
			}
			.rooms{
				line-height: 56upx;
				border-bottom: 1px solid #F5F5F5;
				padding-top: 20upx;
				padding-bottom:24upx;
			}
			// .phoneNum {
			// 	// margin-top: 40upx;
			// }

			.contacts,
			.phoneNum {
				line-height: 56upx;
				padding-top: 24upx;
				padding-bottom:24upx;
				display: flex;
				border-bottom: 1px solid #F5F5F5;
				// padding-bottom: 41upx;

				text {
					font-size: 30upx;
					// line-height: 54upx;
					text-align: center;

				}

				.mainInput {
					
					font-size: 32upx;
					margin-left: 41upx;
				}

				.InputName {
					margin-left: 50upx;
				}
			}
			.desc{line-height: 56upx;
				padding-top: 34upx;
				padding-bottom:24upx;
				display: flex;
				font-size: 30upx;
					// line-height: 54upx;
					text-align: center;
					// margin-right: 20upx;
				.contents{
					margin-left: 20upx;
				}
			}
			
		}
.foot-bar{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			position: fixed;
			width: 100%;
			bottom: 0;
			left:0;
			height: 108upx;
			background: #fff;
		}
		.bottom-left{
			display: flex;
			// justify-content: center;
			// margin-left: 70upx;
			align-items: center;
			width: 50%;
			.money {
					font-size: 36upx;
					color: #FE5A34;
				}
				margin-left: 50upx;
		}
		.bottom-right {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32upx;
				width: 50%;
				background: linear-gradient(left,#fa643d,#ff504f);
				color: #fff;
				height: 100%;
				padding: 20upx;
				text-align: center;
		}
		
	}
</style>
